import { h, init } from 'snabbdom'
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import originalData from './data'

let patch = init([style, eventlisteners])

let data = [...originalData]
const container = document.querySelector('#container')

let sortBy = 'rank';
// 使用 h() 函数创建 vnode

const view = (data) => {
    return h(
        'div#container',
        {
            // 设置 DOM 元素的行内样式
            style: {
                backgroundColor: '#1d1c19',
                fontSize: '26px',
                color: '#fff',
                padding: '20px 50px',

            },
            // 注册事件
            on: {

            },
        },
        [
            h('h1', 'Top 10 moivies'),
            h('div', [
                'Sort by:  ',
                h('a.btn.rank', {
                    on: { click: [changeSort, 'rank'] },
                    'class': { active: sortBy === 'rank' },
                    style: {
                        backgroundColor: '#1c1a18',
                        fontSize: '18px',
                        padding: '10px',
                        color: '#7c8b94',
                        cursor: 'pointer'

                    },
                }, 'Rank'),
                h('a.btn.title', {
                    on: { click: [changeSort, 'title'] },
                    'class': { active: sortBy === 'title' },
                    style: {
                        backgroundColor: '#1c1a18',
                        fontSize: '18px',
                        padding: '10px',
                        color: '#7c8b94',
                        cursor: 'pointer'

                    }
                }, 'Title'),
                h('a.btn.desc', {
                    on: { click: [changeSort, 'desc'] },
                    'class': { active: sortBy === 'desc' },
                    style: {
                        backgroundColor: '#1c1a18',
                        fontSize: '18px',
                        padding: '10px',
                        color: '#7c8b94',
                        cursor: 'pointer'

                    }
                }, 'Description'),
                h('a.btn.add', {
                    on: { click: add },
                    style: {
                        backgroundColor: '#1c1a18',
                        fontSize: '18px',
                        padding: '10px',
                        color: '#7c8b94',
                        float: 'right',
                        cursor: 'pointer'
                    }
                }, 'Add'),
            ]),
            h('div.list', data.map(movieView))

        ],
    );
}

//添加
const add = () => {
    const n = originalData[Math.floor(Math.random() * 10)];
    data = [{ rank: data.length + 1, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
    //重新渲染
    render()


}

//重新渲染
const render = () => {
    oldVnode = patch(oldVnode, view(data));
}

//排序
const changeSort = (prop) => {
    sortBy = prop;
    data.sort((a, b) => {
        if (a[prop] > b[prop]) return 1
        if (a[prop] < b[prop]) return -1
        return 0
    })
    render()
}

//渲染单个数据
const movieView = (movie) => {
    return h('div.li', {
        key: movie.rank,
        style: {
            display: 'none',
            backgroundColor: '#1c1a18',
            margin: '10px',
            padding: '10px',
            delayed: { transform: 'translateY(' + movie.offset + 'px)', display: 'block' },
            remove: { display: 'none', transform: 'translateY(' + movie.offset + 'px) translateX(200px)' }
        },
        hook: {
            insert: function insert (vnode) {
                movie.elmHeight = vnode.elm.offsetHeight;
            }
        },
    }, [
        h('div', {
            style: {
                fontWeight: 'bold',
                width: '100px',
                display: 'inline-block',

            }
        }, movie.rank),
        h('div', {
            style: {
                width: '500px',
                display: 'inline-block'
            }
        }, movie.title), h('div', {
            style: {
                display: 'inline-block',
                width: '600px'
            }
        }, movie.desc),
        h('div.btn.rm-btn', {
            style: {
                display: 'inline-block',
                width: '50px',
                verticalAlign: 'top',
                cursor: 'pointer'

            },
            on: { click: [remove, movie] },

        }, 'x')
    ]
    )

}

//删除
const remove = (movie) => {
    data = data.filter(function (m) {
        return m !== movie;
    });
    render()
}

let oldVnode = patch(container, view(data));

function foo(){
    function fn(){
        console.log(this);
        console.log(arguments);
    }
    fn(4,6,5)
}
const obj ={
    name:'xxx',
    foo:foo
}
obj.foo(1,2,3)